<template>
  <div>
    <a-spin :spinning="spinning" tip="正在生成文件，请等待">
    <div class="index-box">
      <div class="content-head">
        <div class="content-head-title">
            <a-button @click="exct">导出台帐</a-button>
        </div>
        <div class="content-head-extra">
          <!--<a-select style="width:200px;margin-right: 16px;" :options="communityList" @change="onSearch($event,1)" placeholder="请选小区" />-->
          <!--<a-range-picker style="width:200px;" @change="onSearch($event,2)"/>-->
          <a-input-search style="width:200px;" placeholder="请输入名称" enterButton @search="onSearch($event,3)"/>
        </div>
        <a-col span="2">
          <a-button style="margin-left: 5px" @click="searchModal">
            <a-icon type="filter" />
          </a-button>
        </a-col>
        <a-modal
                title="高级搜索"
                :visible="searchVisible"
                @ok="searchOk"
                :confirmLoading="confirmLoading"
                @cancel="searchCancel"
        >
          <a-row>
            <a-form>
              <a-col span="24">
                <a-form-item label="小区" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <a-select placeholder="请选择小区">
                    <a-select-option v-for="(item,index) in bd_info" :key="index" :value="item.id" @click="bd_click(item.id)">{{item.name}}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col span="24">
                <a-form-item label="收款方式" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <a-select placeholder="请选择收款方式" @change="sou_click">
                    <a-select-option value="0">
                      全部
                    </a-select-option>
                    <a-select-option value="1">
                      线下支付-现金
                    </a-select-option>
                    <a-select-option value="2">
                      线下支付-支票
                    </a-select-option>
                    <a-select-option value="3">
                      线下支付-银行转账
                    </a-select-option>
                    <a-select-option value="4">
                      线下支付-pos机刷卡
                    </a-select-option>
                    <a-select-option value="5">
                      线下支付-支付宝直接转账
                    </a-select-option>
                    <a-select-option value="6">
                      线下支付-微信直接转账
                    </a-select-option>
                    <a-select-option value="7">
                      小区收款码-支付宝
                    </a-select-option>
                    <a-select-option value="8">
                      小区收款码-微信
                    </a-select-option>
                    <a-select-option value="9">
                      网上缴费1
                    </a-select-option>
                    <a-select-option value="10">
                      网上缴费2
                    </a-select-option>
                    <a-select-option value="11">
                      网上缴费3
                    </a-select-option>
                    <a-select-option value="12">
                      账户余额
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col span="24">
                <a-form-item label="开始/结束时间" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                    <a-date-picker @change="start_time" style="width: 100%" />
                  </a-form-item>
                  <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">
                    -
                  </span>
                  <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                    <a-date-picker @change="end_time" style="width: 100%" />
                  </a-form-item>
                </a-form-item>
              </a-col>
              <a-col span="24">
                <a-form-item label="金额区间" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <a-input v-on:keyup="jine_min" style="width: 45%;" placeholder="最小"></a-input>
                  <a-input v-on:keyup="jine_max" style="margin-left:5%;width: 45%;" placeholder="最大"></a-input>
                </a-form-item>
              </a-col>
              <a-col span="24">
                <a-form-item label="名称" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <a-input v-on:keyup="h_name" style="margin-left:5%;"></a-input>
                </a-form-item>
              </a-col>
            </a-form>
          </a-row>
        </a-modal>
      </div>
      <div class="content-body">
        <s-table ref="table" :columns="columns" :data="dataSource" :loading="loading" rowKey="id" >
          <template slot="operation" slot-scope="text,record">
            <a-dropdown>
              <a class="ant-dropdown-link" href="javascript:void(0);">操作 <a-icon type="down" /></a>
              <a-menu slot="overlay" @click="operation($event,record)">
                <a-menu-item key="1">编辑</a-menu-item>
                <a-menu-item key="2">绑定{{typeNameText[record['type_name']]}}</a-menu-item>
                <a-menu-item v-if="record['type_name'] == 4" key="2.5">查看列表</a-menu-item>
                <a-menu-item key="3">删除</a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>
        </s-table>
      </div>
    </div>
      <a-modal
              title="确认窗口"
              :visible="show_se"
              @ok="exportOk1"
              @cancel="export_se_cel"
      >
        <span v-for="(item,index) in qu_s" :key="index" style="padding: 3px;font-size: 16px">{{item}}<br /></span>
      </a-modal>
    <a-modal title="导出台账" v-model="exctModel" :confirmLoading="exctModelModalLoading" :afterClose="() => { form.resetFields(); }" @ok="handleSubmit">
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item label="所属小区" :labelCol="{xs:{span:24},sm:{span:6}}" :wrapperCol="{xs:{span:24},sm:{span:16}}">
           <a-select  :options="communityList"  placeholder="请选小区" v-decorator="['bd_info_id',{rules:[{required:true,message:'请选小区'}],initialValue:undefined}]"/>
        </a-form-item>
       
        <a-form-item label="选择导出时间" :required="true" :labelCol="{xs:{span:24},sm:{span:6}}" :wrapperCol="{xs:{span:24},sm:{span:16}}">
          <a-range-picker v-decorator="['timsed',{rules:[{required:true,message:'选择导出时间'}]}]"/>
        </a-form-item>
      </a-form>
    </a-modal>
    </a-spin>
  </div>
</template>

<script>
  import { ACCESS_TOKEN } from '@/store/mutation-types'
  import {STable} from '@/components'
  import moment from 'moment'
  import { mapGetters } from 'vuex'
  export default {
    name: 'data_labels_index',
    data() {
      return {
          searchVisible:false,
          confirmLoading:false,
          jine_max_val:'',
          jine_min_val:'',
        exctModel:false,
        form:this.$form.createForm(this),
        exctModelModalLoading:false,
        moment,
        spinning:false,
        times:'',
        token:this.$ls.get(ACCESS_TOKEN),
        description:'查看导出单个小区时间段内的收费数据台账',
        typeNameList:[{label:'全部标签',value:0},{label:'房屋标签',value:1},{label:'车位标签',value:2},{label:'车辆标签',value:3},{label:'住户标签',value:4}],
        typeNameText:{"1":'房屋',"2":'车位',"3":'车辆',"4":'住户'},
        columns:[{title:'收据编号',dataIndex:'nums'},{ title:'收费名称',dataIndex:'name' },{ title: '小区',dataIndex:'bd_info_id_text' } ,{ title: '金额',dataIndex:'money' },{ title: '支付方式',dataIndex:'style_text' },{ title: '收费时间',dataIndex:'pay_time' }],
        loading:false,
          sou:'',
          bd_info:[],
          start_time_value:'',
          end_time_value:'',
        baseExcDate:{pageNo:1,pageSize:10},
        queryParam:{},
        baseURL:this.axios.defaults.baseURL,
        dataSource:parameter => {
          return this.getList(Object.assign(parameter, this.queryParam))
            .then(res => {
              return res
            })
        }, // 列数据
          bd_id:0,
        labelsInfo:{}, // 标签信息
        labelsForm:this.$form.createForm(this),
        labelsModalTitle:'', // 添加or编辑标签弹窗文字
        labelsModalPop:false, // 添加or编辑标签弹窗
        labelsOperationLoading:false, // 添加or编辑标题弹窗确定按钮加载状态
        bindTitle:'', // 绑定标签标题
          qu_s:'',
        bindPop:false, // 绑定标签弹窗
        bindDataLoading:true, // 绑定标签骨架屏加载状态
          name:'',
          show_se:false,
        bindForm:this.$form.createForm(this),
        bindDataList:[],
        bindUserForm:this.$form.createForm(this), // 绑定住户
        bindUserModal:false, // 绑定住户
        bindUserModalLoading:false, // 绑定住户loading
        fetching:false,
          bd_click(v){
              this.bd_id = v;
          },
          labelCol: {
              xs: { span: 24 },
              sm: { span: 6 },
          },
          wrapperCol: {
              xs: { span: 24 },
              sm: { span: 14 },
          },
        communityList:[], // 小区列表
        bindUserList:[], // 住户列表
        excParam:{}
      }
    },
    components:{STable},
    mounted() {
      this.getCommunity();
      this.getBdList();
    },
    methods:{
        ...mapGetters(['pmsArId', 'nowMg']),
        searchOk() {
            this.searchVisible = false;
            this.queryParam['cm_mg_id'] = this.nowMg();
            this.queryParam['bd_info_id'] = this.bd_id;
            this.queryParam['sou'] = this.sou;
            this.queryParam['start_time'] = this.start_time_value;
            this.queryParam['end_time'] = this.end_time_value;
            this.queryParam['jine_max'] = this.jine_max_val;
            this.queryParam['jine_min'] = this.jine_min_val;
            this.queryParam['name'] = this.name;
            this.$refs.table.refresh(true);
        },
        sou_click(v){
            this.sou = v;
        },
        getBdList(){
            this.axios({
                method:'get',
                url:'/community/get_bd_config_list',
                params:{token:this.token,ar_id: this.pmsArId(),cm_mg_id: this.nowMg()}
            }).then(res => {
                let { code,msg,data } = res;
                if(code === 0){
                    let ifo = {id:0,name:'所有小区'};
                    data.unshift(ifo);
                    this.bd_info = data;
                }else this.$message.warning(msg);
            }).catch(err => {
                this.$message.error('服务器发生错误...');
            })
        },
        h_name(v){
            this.name = v.target.value;
        },
        jine_min(v){
            this.jine_min_val = v.target.value;
        },
        jine_max(v){
            this.jine_max_val = v.target.value;
        },
        searchCancel() {
            this.searchVisible = false
        },
        start_time(date, dateString) {
            this.start_time_value = dateString;
        },
        end_time(date, dateString){
            this.end_time_value = dateString;
        },
        searchModal() {
            this.searchVisible = true
        },
      getList(param) {
        this.loading = true;
        return new Promise((resolve, reject) => {
          this.axios({
            method:'post',
            url:'/cashier/dailyGetList',
            data:Object.assign(param,{token:this.token})
          }).then(res => {
            resolve(res.data);
          }).catch(err => {
            this.$message.error('服务器发生错误...',2);
          }).finally(() => {
            this.loading = false;
          })
        })
      },
      // 筛选
      onSearch(val,type) {
        if(type == 1) {
            this.queryParam['bd_info_id'] = val;
        }else if(type==2){
            this.queryParam['start_time'] = val[0].format('YYYY-MM-DD');
            this.queryParam['end_time'] = val[1].format('YYYY-MM-DD');
        }else{
            this.name = val;
            this.queryParam['name'] = val;
            this.$refs.table.refresh(true);
        }
      },
      handleSubmit(){
        this.form.validateFields((err, values) => {
          if (err) {
            for (let key in err) {
              for (let item of err[key]['errors']) return this.$message.warning(item['message'], 2)
            }
          }
          this.spinning=true
          this.exctModel=false
          this.excParam={
            bd_info_id:values.bd_info_id,
            start_time:values.timsed[0].format('YYYY-MM-DD'),
            end_time:values.timsed[1].format('YYYY-MM-DD'),
          }
          this.baseExcDate={pageNo:1,pageSize:10}
          this.escec(Object.assign(this.baseExcDate, this.excParam))
        })
          
      },
        exportOk1() {
            this.spinning=true;
            this.baseExcDate={pageNo:1,pageSize:100};
            this.exportVisible = false;
            let qu = [];
            qu['start_time'] = this.start_time_value;
            qu['end_time'] = this.end_time_value;
            qu['jine_max'] = this.jine_max_val;
            qu['jine_min'] = this.jine_min_val;
            qu['name'] = this.name;
            qu['sou'] = this.sou;
            qu['bd_info_id'] = this.bd_id;
            this.escec(Object.assign(this.baseExcDate, qu))
        },
        export_se_cel(){
            this.show_se = false;
        },
      exct(){
          let dit = {name:this.name,
              cm_mg_id:this.nowMg(),
              bd_info_id:this.bd_id,
              sou:this.sou,
              start_time:this.start_time_value,
              end_time:this.end_time_value,
              jine_max:this.jine_max_val,
              jine_min:this.jine_min_val,
          };
          this.axios({
              method:'post',
              url:'/cashier/daily_exp_se',
              data:Object.assign(dit,{token:this.token})
          }).then(res => {
              if(res.code==0){
                  this.show_se = true;
                  this.qu_s = res.msg;
              }else if(res.code==1000){
                  this.spinning=false;
              }else{
                  this.spinning=false;
                  this.$message.warning(res.msg,2)
              }
          }).catch(err => {
              this.spinning=false;
              this.$message.error('服务器发生错误...',2);
          }).finally(() => {
              this.loading = false;
          })
      },
      escec(param){
            this.loading = true;
            const _this=this;
            this.axios({
                method:'post',
                url:'/cashier/dailyExc',
                data:Object.assign(param,{token:this.token})
            }).then(res => {
                if(res.code==0){
                    this.$message.success(`正在生成台帐请不要刷新页面\n 当前${res.data.pageNo}/${res.data.totalPage}`,2);
                    // if(res.data.totalCount>res.data.pageNo){
                        _this.baseExcDate.pageNo=_this.baseExcDate.pageNo+1;
                        _this.escec(Object.assign(_this.baseExcDate, _this.excParam))
                    // }
                }else if(res.code==1000){
                  this.spinning=false;
                  window.location.href=this.baseURL+res.url;
                }else{
                    this.spinning=false;
                    this.$message.warning(res.msg,2)
                }
            }).catch(err => {
                this.spinning=false;
                this.$message.error('服务器发生错误...',2);
            }).finally(() => {
                this.loading = false;
            })
      },
      // 获取小区列表
      getCommunity() {
        this.axios({
          method:'post',
          url:'/parking/getAllCommunityList',
          data:{token:this.token}
        }).then(res => {
          if(res.code === 0){
            this.communityList = res.data;
          }else this.$message.warning(res.msg);
        }).catch(err => {
          this.$message.error('服务器发生错误...');
        })
      },
      // 获取绑定住户列表
      getBindUserList(value) {
        let bd_info_id = this.bindUserForm.getFieldValue('bd_info_id');
        if(this.$common.isEmpty(bd_info_id)) this.$message.warning('请先选择所属小区');
        if (value && value.length > 1) {
          this.fetching = true;
          this.axios({
            method: "post",
            url: "/labels/getBindUserList",
            data: { id: this.labelsInfo.id, bd_info_id, token: this.token,text:value }
          }).then(res => {
            this.bindUserList = res.data;
          }).catch(err => {
            this.$message.error('服务器发生错误...');
          }).finally(() => {
            this.fetching = false;
          })
        }else this.bindUserList = [];
      },
      // 提交绑定住户
      bindUserSubmit(e) {
        e.preventDefault();
        this.bindUserForm.validateFields((err, values) => {
          if (err) {
            for (let key in err) {
              for (let item of err[key]['errors']) return this.$message.warning(item['message'], 2)
            }
          }
          Object.assign(values,{token:this.token});
          this.bindUserModalLoading = true;
          this.axios({
            method: 'post',
            url: '/labels/bindUser',
            data: values
          }).then(res => {
            if (res.code == 0) {
              this.$message.success('绑定成功', 1)
              this.bindUserModal = false;
            } else this.$message.warning(res.msg)
          }).catch(() => {
            this.$message.error('服务器发生错误...', 2);
          }).finally(() => {
            this.bindUserModalLoading = false;
          })
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .index-box{
    background: #ffffff;
    padding: 25px;
    box-sizing: border-box;
    .content-body{
      padding-top:20px;
    }
    .content-head{
      display: flex;
      align-items: center;
      .content-head-title{
        display: inline-block;
        flex: 1 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .content-head-extra{
        float: right;
      }
    }
  }
</style>